﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery.aspx.cs" Inherits="ProjectTest.Page.jQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
       div,span,p
       {
         width:140px;
         height:140px;
         margin:5px;
         background: #aaa;
         border:#000 1px solid;
         float: left;
         font-size:17px;
         font-family:Verdana;  
       }
       div.mini
       {
          width:55px;
          height:55px;
          background-color:#aaa;
          font-size:12px;    
       }
       div.hide
       {
           display:none;
       }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            $("#one").css("background", "#bbffaa");    //改变id为one的元素的背景色
            $(".mini").css("background", "#bbffaa");   //改变class为mini的背景色
            $("div").css("background", "#ffffff");     //改变所有div的背景色  ==  $("body div").css("background", "#bbffaa");  //改变body内所有div的背景色
            $("*").css("background", "#bbffaa");       //改变所有元素的背景色
            $("span, #two").css("background", "#bbffaa"); //改变所有span和id为two的背景色
            */

            //$("body > div").css("background", "#bbffaa");   //改变body内子div元素的背景色
            //$(".one + div").css("background", "#bbffaa");   //改变class为one的下一个div兄弟元素背景色
            $('#two ~ div').css("background", "#bbffaa");     //改变id为two的元素后面的所有div兄弟元素的背景色


        });
    </script>
</head>
<body>
    <div class ="one" id="one">
       id 为one, class 为one的div
       <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
      <div class="mini" title="other">class为mini, title为other</div>
      <div class="mini" title="test">class为mini, title为test</div>
    </div>
    <div class="one">
      <div class="mini">class 为mini</div>
      <div class="mini">class 为mini</div>
      <div class="mini">class 为mini</div>
      <div class="mini"></div>
    </div>
    <div class="one">
      <div class="mini">class 为mini</div>
      <div class="mini">class 为mini</div>
      <div class="mini">class 为mini</div>
      <div class="mini" title="tesst">class为mini, title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class 为"hide"的div</div>
    <div>
     包含input的type为"hidden"的div<input type="hidden" size="8" />
    </div>
    <span id="mover">正在执行动画的span元素</span>
</body>
</html>
